<template>
  <div class="container">
    <!-- nav -->
    <div :class="show ? 'nav nav-show' : 'nav nav-hide'">
      <div @click="reload" class="logo">
        <img :src="$store.state.company_logo" alt />
        <!-- <div>{{ $store.state.company_name }}</div> -->
      </div>
      <!-- 我的 -->
      <el-popover width="100" trigger="hover">
        <div v-show="$store.state.is_login" slot="reference" class="title">
          <!-- <img :src="user_head" alt> -->
          <span>{{ user_name || "我的" }}</span>
        </div>
        <div class="btn">
          <!-- <span @click="changePage('/mine/index')">个人中心</span> -->
          <span @click="changePage('0')">继续学习</span>
          <span @click="changePage('1')">我的课程</span>
          <span @click="changePage('2')">学习档案</span>
          <span @click="changePage('3')">消息中心</span>
          <span @click="changePage('4')">修改密码</span>
          <span @click="changePage('5')">充值中心</span>
          <span @click="$store.commit('logout')">退出登录</span>
        </div>
      </el-popover>
      <div @click="$store.state.show_login = true" v-show="!$store.state.is_login">登录</div>
      <div class="icon" @click="$store.state.show_search = true">
        <div></div>
        <img src="@/assets/search.png" alt />
      </div>
      <div class="icon" @click="show_menu = true">
        <div></div>
        <img src="@/assets/menu.png" alt />
      </div>
    </div>
    <!-- 菜单 -->
    <div class="menu" :style="show_menu ? 'right: 0' : ''">
      <div
        v-for="(item, index) in hot_list"
        :key="index"
        v-show="!search_value"
        @click="changeClass(item.id)"
        class="hot-list"
      >
        <img :src="item.icon" alt />
        <div>
          <span>{{ item.name }}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div
        v-for="(item, index) in search_list"
        :key="index"
        @click="changeLesson(item.id)"
        v-show="search_value"
      >
        <img :src="item.image" alt />
        <div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="close" @click="closeMenu" v-show="show_menu">
      <div></div>
      <img src="@/assets/close.png" />
    </div>
    <div class="close back" @click="search_value = ''" v-show="show_menu && search_value">
      <div></div>
      <img src="@/assets/back.png" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      show_search: false,
      show_search_item: false,
      show_login: false,
      show_classes: false,
      show_mine: false,
      show_menu: false,
      search_value: "",
      search_list: [],
      lesson_index: "",
      user_head: localStorage.getItem("user_head"),
      user_name: localStorage.getItem("user_name"),
      hot_list: []
    };
  },
  methods: {
    closeMenu() {
      let _this = this;
      _this.show_menu = false;
      _this.search_list = [];
      _this.search_value = "";
    },
    changeClass(e) {
      let _this = this;
      _this.search_value = e;
      _this.$axios
        .get("site/searcher", {
          params: {
            category_id: e
          }
        })
        .then(res => {
          _this.search_list = res;
        });
    },
    inSearch(e) {
      let _this = this;
      if (e) {
        _this.$axios
          .get("site/searcher", {
            params: {
              name: e
            }
          })
          .then(res => {
            _this.search_list = res;
          });
      }
    },
    changeLesson(i) {
      let _this = this;
      if (_this.$route.path == "/Teacher/index") {
        this.$router.push({
          path: "/Teacher/index",
          query: {
            id: i
          }
        });
      } else {
        this.$router.push({
          path: "/Teacher/index",
          query: {
            id: i
          }
        });
      }
    },
    changePage(e) {
      this.$store.state.mine_index = e;
      this.$router.push("/mine/index");
    },
    reload() {
      location.href = "http://" + location.host;
    }
  },
  created() {
    let _this = this;
    _this.$axios.get("site/hot-searcher").then(res => {
      _this.hot_list = res;
    });
    window.onscroll = res => {
      if (pageYOffset == 0) _this.show = true;
      else this.show = false;
    };
  },
  watch: {
    "$route.path": function() {
      this.show_menu = false;
    },
    "$route.query": function() {
      this.show_menu = false;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  .nav {
    width: 100%;
    height: 1rem;
    transition: all 1500ms;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: @title-size;
    box-sizing: border-box;
    padding-right: 0.5rem;
    transition: 1000ms;
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      margin-left: 0.4rem;
      > div {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      > img {
        width: 0.2rem;
        height: 0.2rem;
        object-fit: contain;
      }
    }
    .icon {
      background: white;
      padding: 0.1rem;
      border-radius: 50%;
      position: relative;
      > div {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 0.03rem @gold-color solid;
        border-radius: 50%;
        animation: icon-an 2s infinite;
        @keyframes icon-an {
          0% {
            width: 90%;
            height: 90%;
            opacity: 1;
          }
          // 50% {
          //   width: 190%;
          //   height: 190%;
          // }
          100% {
            width: 190%;
            height: 190%;
            opacity: 0;
          }
        }
      }
    }
    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      margin-left: 0.4rem;
      > img {
        width: 0.25rem;
        height: 0.25rem;
        object-fit: contain;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
    .logo {
      flex-direction: column;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      > img {
        width: 2rem;
        height: 1rem;
        object-fit: contain;
      }
    }
  }
  .nav-show {
    background: linear-gradient(to bottom, black, transparent);
    animation: nav-show 1200ms;
    // @keyframes nav-show {
    //   0% {
    //     transform: rotateX(0deg) skewX(0deg);
    //   }
    //   20% {
    //     transform: rotateX(90deg) skewX(-20deg);
    //   }
    //   40% {
    //     transform: rotateX(0deg) skewX(20deg);
    //   }
    //   60% {
    //     transform: rotateX(-20deg) skewX(-20deg);
    //   }
    //   80% {
    //     transform: rotateX(20deg) skewX(20deg);
    //   }
    //   100% {
    //     transform: rotateX(0deg) skewX(0deg);
    //   }
    // }
  }
  .nav-hide {
    background: black;
    animation: nav-hide 1200ms;
    // @keyframes nav-hide {
    //   0% {
    //     transform: rotateX(0deg) skewX(0deg);
    //   }
    //   20% {
    //     transform: rotateX(90deg) skewX(-20deg);
    //   }
    //   40% {
    //     transform: rotateX(0deg) skewX(20deg);
    //   }
    //   60% {
    //     transform: rotateX(-20deg) skewX(-20deg);
    //   }
    //   80% {
    //     transform: rotateX(20deg) skewX(20deg);
    //   }
    //   100% {
    //     transform: rotateX(0deg) skewX(0deg);
    //   }
    // }
  }
  .list_box {
    width: @width * 0.3;
    background: black;
    border-right: 1px white solid;
    border-bottom: 1px white solid;
    border-left: 1px @node-color solid;
    border-top: 1px @node-color solid;
    position: absolute;
    top: calc(-100vh - 2rem);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 500ms ease-out;
    > input {
      width: calc(100% - 0.4rem);
      box-sizing: border-box;
      padding: 0.2rem 0.1rem 0.05rem 0.1rem;
      color: white;
      background: black;
      border-bottom: 2px @node-color solid;
      margin-bottom: 0.2rem;
      font-size: @normal-size;
      outline: none;
    }
    > div {
      width: 100%;
      max-height: calc(100vh - 2rem);
      overflow: scroll;
      scrollbar-width: none;
      > div {
        width: 100%;
        // height: 0.5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0.2rem 0.2rem;
        border-top: 1px @node-color solid;
        cursor: pointer;
        color: @node-color;
        > img {
          width: 0.8rem;
          height: 0.5rem;
          object-fit: cover;
        }
        > div {
          width: calc(100% - 1rem);
          display: flex;
          flex-direction: column;
          font-size: @small-size;
          > span {
            color: white;
            font-size: @normal-size;
          }
        }
      }
      > div:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
    > span {
      width: 100%;
      box-sizing: border-box;
      padding: 0.2rem 0;
      color: @node-color;
      text-align: center;
      border-top: 1px @node-color solid;
      cursor: pointer;
    }
    > span:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
  .menu {
    width: 5rem;
    height: 100vh;
    position: fixed;
    right: -5rem;
    background: #191919;
    padding: 0.65rem 0.55rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    transition: 300ms;
    top: 0;
    > div {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: @dark-color;
      box-sizing: border-box;
      padding: 0.2rem;
      position: relative;
      cursor: pointer;
      > img {
        width: 1rem;
        height: 0.6rem;
        object-fit: cover;
      }
      > div {
        width: calc(100% - 1.2rem);
        display: flex;
        flex-direction: column;
        font-size: @normal-size;
        > p {
          width: 100%;
          word-break: break-all;
          color: @node-color;
        }
      }
      .title {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: 300ms;
        cursor: pointer;
      }
      .title:hover {
        opacity: 1;
      }
    }
    > div + div {
      margin-top: 0.3rem;
    }
    .hot-list {
      > img {
        width: 0.3rem;
        height: 0.3rem;
        object-fit: contain;
      }
      > div {
        width: calc(100% - 0.5rem);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .close {
    width: 0.3rem;
    height: 0.3rem;
    background: white;
    padding: 0.1rem;
    border-radius: 50%;
    position: absolute;
    right: 4.75rem;
    top: 0.3rem;
    > div {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 0.03rem @gold-color solid;
      border-radius: 50%;
      animation: icon-an 2s infinite;
      @keyframes icon-an {
        0% {
          width: 90%;
          height: 90%;
          opacity: 1;
        }
        100% {
          width: 190%;
          height: 190%;
          opacity: 0;
        }
      }
    }
    > img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: relative;
    }
  }
  .back {
    top: 1rem;
  }
}
.btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  > span {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: @normal-size;
    color: white;
    cursor: pointer;
  }
  > span:hover {
    background: @dark-color;
  }
}
</style>